<template>
  <div class="canvas" id="js-canvas-container"></div>
</template>

<script>
import SakuraCanvas from './SakuraCanvas'

export default {
  title: '樱花canvas',
  mounted() {
    this.init()
  },
  methods: {
    init() {
      var container = document.getElementById('js-canvas-container');
      var options = {
        canvasWidth: window.innerWidth,
        canvasHeight: window.innerHeight
      };
      var sakura;
      try {
        // Error will be throw when instantiation if the browser doesn't support <canvas>
        sakura = new SakuraCanvas(options);
        sakura.init();
        container.appendChild(sakura.getCanvas());
        sakura.animate();
      } catch (ex) {
        container.innerHTML = '<p class="ec-text-error">' + ex.message + '</p>';
      }

      if (!sakura) return;

      this.resizeTimer;
      var resizeTimeout = 500;
      var updateCanvasSize = function () {
        sakura.setConfig({
          canvasWidth: window.innerWidth,
          canvasHeight: window.innerHeight
        });
      };
      this.resizeHandler = function () {
        clearTimeout(this.resizeTimer);
        this.resizeTimer = setTimeout(updateCanvasSize, resizeTimeout);
      };
      window.addEventListener('resize', this.resizeHandler, false);
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeTimer)
    clearTimeout(this.resizeTimer)
  }
}
</script>

<style lang="scss" scoped>
.canvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: black;
}
</style>
